window.onload = function () {
    let cuxiao = document.querySelector('.cuxiao');
    let list = document.querySelector('.list');
    let right = document.querySelector('.right');
    let anli = document.querySelector('.anli');
    let tuijian = document.querySelector('.tuijian');
    
    let res = pAjax({
        url:'../data/jk/liebiao.json'
    });
    res.then(function (res) {
        res = JSON.parse(res);  
        //处理steam促销数据
        let last = res.result.all_list[0].list;
        render(last);

        //处理销量
        let xl = res.result.all_list[1].list.slice(0, 4);
        render2(xl);
        let xl2 = res.result.all_list[1].list.slice(-1);
        render3(xl2);

        //安利
        let anL = res.result.all_list[2].list;
        render4(anL);

        //推荐
        let tuijian = res.result.all_list[3].list;
        render5(tuijian);
        

    })
    

    //steam促销
    function render(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <li >
                        <div class="warpper">
                            <div class="photo">
                                <img src="${item.game_img}" class='stcx' alt="">
                            </div>
                            <h3>${item.game_name}</h3>
                            <div class="price">
                                <span>
                                    <p>
                                        <i class="iconfont icon-steam"></i>
                                        <span>￥${item.price.current}</span>
                                        <span class="yj">￥${item.price.initial}</span>
                                    </p>
                                </span>
                            </div>
                        </div>
                    </li>
                    `;

        });
        cuxiao.innerHTML = str;
    }

    //  销量

    function render2(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <div class="top">
                        <img src="${item.game_img}" alt="">
                        <div class="info">
                            <div class="name">${item.game_name}</div>
                            <div class="price">
                                <i class="iconfont icon-steam"></i>
                                <span>￥${item.price.current}</span>
                                <span class="yj">￥${item.price.initial}</span>
                            </div>
                        </div>
                    </div>
                    `
        });
        list.innerHTML = str;
    }

    function render3(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <img src="${item.game_img}" alt="">
                    <div class="info">
                        <div class="name">${item.game_name}</div>
                        <div class="price">
                            <i class="iconfont icon-steam"></i>
                            <span>￥${item.price.current}</span>
                            <span class="yj">￥${item.price.initial}</span>
                        </div>
                    </div>
                    `
        });
        right.innerHTML = str;
    }

    //安利
    function render4(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <li>
                        <div class="inner">
                            <div class="banner">
                                <img src="${item.game.image}" alt="">
                                <div class="nr">
                                    <h3>${item.game.name}</h3>
                                    <p>${item.game.rec_cnt}人推荐</p>
                                </div> 
                            </div>
                            <div class="info">
                                <p>${item.description}</p>
                            </div>
                            <div class="uname">
                                <p class="player">${item.user.username}</p>
                            </div>
                        </div>
                    </li>
                    `
        });
        anli.innerHTML = str;
    }

    //推荐
    function render5(data) {
        let str = '';
        data.forEach(function (item) {
            str +=
                `
                <li>
                    <div class="warpper">
                        <div class="photo">
                            <img src="${item.game_img}" alt="">
                            </div>
                                <h3>${item.game_name}</h3>
                                <div class="price">
                                <span>
                                    <p>
                                        <i class="iconfont icon-steam"></i>
                                        <span>￥${item.price.current}</span>
                                        <span class="yj">￥${item.price.initial}</span>
                                    </p>
                                </span>
                        </div>
                    </div>
                </li>
                `
        });
        tuijian.innerHTML = str;
    }













    
    cuxiao.onclick = function (e) {
        var e = e || window.event;
        console.log(e.target);
        if (e.target.classList.contains('stcx')) {
            location.href = `../html/xiangqing.html`;
            console.log(1);
        }
    }

}
